<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <div class="box">
        <span>备忘录</span><input type="text" id="add"><br>
        <ol class="ol">
            <!-- <li>
                <input type="checkbox">
                <span>我是内容</span>
                <button>取消</button>
                <button>恢复</button>
            </li>
            <li>
                <input type="checkbox">
                <span>我是内容</span>
                <button>取消</button>
                <button>恢复</button>
            </li> -->
        </ol>
     </div>
</body>
<script>
    window.onload = function () {
        document.getElementById('add').addEventListener('keyup',addlist)
        render()
    }
    function addlist(){
        if(event.keyCode == 13) {
            // console.log(this.value);
            let tmp = {
                con:this.value,
                status: 1, //1代表未完成, 2代表已完成, 3代表删除
            }
            setLocalData(tmp)
            this.value = ''
            render()
        }
    }
    function setLocalData(tmp){
        let data = getLocalData()
        data.push(tmp)
        localStorage.setItem('data', JSON.stringify(data))
    }
    function render() {
        let data = getLocalData()
            html = ''
        // data.forEach(() => {
        //     console.log(11);
        //     html += `
        //             <li>
        //                 <input type="checkbox">
        //                 <span>我是内容</span>
        //                 <button>取消</button>
        //                 <button>恢复</button>
        //             </li> 
        //             `                   
        // })
        // document.querySelector('ol').innerHTML = html
        for(let i = 0; i < data.length; i++) {
            html += `
                    <li>
                        <input type="checkbox">
                        <span>我是内容</span>
                        <button>取消</button>
                        <button>恢复</button>
                    </li>
                    `
        }
        // document.querySelector('ol').innerHTML = html   
        document.getElementsByClassName('ol').innerHTML = html
        console.log(123);
    }
    function getLocalData() {
        let data = localStorage.getItem('data')
        if(data){
            return JSON.parse(data)
        } else {
            return []
        }
    }
</script>
</html>